<template>
    <!-- v-header防止与html5的header冲突 -->
    <div class="header" @click="showDetail">
        <!-- 上层展示 -->
        <div class="content-wrapper">
            <!-- 商家图片 -->
            <div class="avatar">
                <img width="64" height="64" :src="seller.avatar">
            </div>
            <!-- 商家信息 -->
            <div class="content">
                <!-- 商家名称 -->
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">{{seller.name}}</span>
                </div>
                <!-- 送达时间 -->
                <div class="description">
                    {{seller.description}} / {{seller.deliveryTime}}分钟送达
                </div>
                <!-- 活动信息 -->
                <div v-if="seller.supports" class="support">
                    <support-ico :size=1 :type="seller.supports[0].type"></support-ico>
                    <span class="text">{{seller.supports[0].description}}</span>
                </div>

            </div>

            <!-- 活动个数 -->
            <div v-if="seller.supports" class="support-count">
                <span class="count">{{seller.supports.length}} 个</span>
                <i class="icon-keyboard_arrow_right"></i>
            </div>
        </div>

        <!-- 公告栏 -->
        <div class="bulletin-wrapper">
            <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
            <i class="icon-keyboard_arrow_right"></i>
        </div>
        <!-- 背景图片 -->
        <div class="background">
            <img :src="seller.avatar" width="100%" height="100%">
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import SupportIco from 'components/support-ico/support-ico'

    export default {
        name: 'v-header',
        props: {
            seller: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        methods: {
            showDetail() {
                // $createHeaderDetail方法返回一个组件的实例
                this.headerDetailComp = this.headerDetailComp || this.$createHeaderDetail({
                    $props: {
                        seller: 'seller'
                    }
                })
                this.headerDetailComp.show()
            }
        },
        components: {
            SupportIco
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/mixin"
    @import "~common/stylus/variable"

    .header
        position: relative
        overflow: hidden
        color: $color-white
        background: $color-background-ss
        // 商家信息
        .content-wrapper
            position: relative
            display: flex
            align-items: center
            padding: 24px 12px 18px 24px
            // 商家图片
            .avatar
                flex: 0 0 64px
                width: 64px
                margin-right: 16px
                img
                    border-radius: 2px
            .content
                flex: 1
                // 商家名称
                .title
                    display: flex
                    align-items: center
                    margin-bottom: 8px
                    // 名称图片
                    .brand
                        width: 30px
                        height: 18px
                        bg-image('images/brand')
                        background-size: 30px 18px
                        background-repeat: no-repeat
                    // 商家名称
                    .name
                        margin-left: 6px
                        font-size: $fontsize-large
                        font-weight: bold
                // 送达时间
                .description
                    margin-bottom: 8px
                    line-height: 12px
                    font-size: $fontsize-small
                // 商家活动
                .support
                    display: flex
                    align-items: center
                    .support-ico
                        margin-right: 4px
                    .text
                        line-height: 12px
                        font-size: $fontsize-small-s
            // 活动个数
            .support-count
                position: absolute
                right: 12px
                bottom: 14px
                display: flex
                align-items: center
                padding: 0 8px
                height: 24px
                line-height: 24px
                text-align: center
                border-radius: 14px
                background: $color-background-sss
                .count
                    font-size: $fontsize-small-s
                .icon-keyboard_arrow_right
                    margin-left: 2px
                    line-height: 24px
                    font-size: $fontsize-small-s
        // 商家公告
        .bulletin-wrapper
            position: relative
            display: flex
            align-items: center
            height: 28px
            line-height: 28px
            padding: 0 8px
            background: $color-background-sss
            .bulletin-title
                flex: 0 0 22px
                width: 22px
                height: 12px
                margin-right: 4px
                bg-image('images/bulletin')
                background-size: 22px 12px
                background-repeat: no-repeat
            .bulletin-text
                flex: 1
                white-space: nowrap
                overflow: hidden
                // 超出部分以省略号表示
                text-overflow: ellipsis
                font-size: $fontsize-small-s
            .icon-keyboard_arrow_right
                flex: 0 0 10px
                width: 10px
                font-size: $fontsize-small-s
        // 头部背景
        .background
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            z-index: -1
            filter: blur(10px)
</style>
